<template>
  <div>
    <FaPageMain>
      <div class="card-list">
        <el-card shadow="always">
          <div ref="userParkDurationContainer" style="width: 90%; height: 300px"/>
        </el-card>
        <el-card shadow="always">
          <div ref="userRoleRateContainer" style="width: 90%; height: 400px"/>
        </el-card>
        <el-card shadow="always">
          <div ref="SpotStatusContainer" style="width: 90%; height: 300px"/>
        </el-card>
      </div>
    </FaPageMain>
  </div>
</template>

<script lang="js">
import api from '@/api'
import * as echarts from 'echarts'

export default {
  created() {
    this.getParkDuration()
    this.getCountRole()
    this.getSpotStatus()
  },
  mounted() { // ✅ 在 mounted 生命周期初始化（此时 DOM 已挂载）
    this.initUserParkDurationChart()
    this.initUserRoleRateChart()
    this.initSpotStatusChart()
  },
  beforeDestroy() { // 销毁实例避免内存泄漏
    echarts.dispose(this.$refs.userParkDurationContainer);
    echarts.dispose(this.$refs.userRoleRateContainer);
    echarts.dispose(this.$refs.SpotStatusContainer);
  },
  data() {
    return {
      // echarts
      userParkDurationData: undefined,
      userRoleRateData: undefined,
      spotStatusData: undefined
    }
  },
  methods: {
    initUserParkDurationChart() {
      // 确保 ref 已绑定到 DOM 元素
      if (!this.$refs.userParkDurationContainer) return;

      const chart = echarts.init(this.$refs.userParkDurationContainer);
      const option = {
        title: {
          text: '用户停车时长分布',
          subtext: 'Current Data',
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      chart.setOption(option);
    },
    initUserRoleRateChart() {
      // 确保 ref 已绑定到 DOM 元素
      if (!this.$refs.userRoleRateContainer) return;

      const chart = echarts.init(this.$refs.userRoleRateContainer);
      const option = {
        title: {
          text: '用户类型占比',
          subtext: 'Current Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        color: ['#5470c6', '#91cc75', '#ee6666'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.userRoleRateData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    },
    initSpotStatusChart() {
      // 确保 ref 已绑定到 DOM 元素
      if (!this.$refs.SpotStatusContainer) return;

      const chart = echarts.init(this.$refs.SpotStatusContainer);
      const option = {
        title: {
          text: '当前车位状态分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.spotStatusData
          }
        ]
      };
      chart.setOption(option);
    },
    getCountRole() {
      api.post("/user/count/role", null).then(res => {
        if (res?.code === 0) {
          console.log(res.data)
          res.data?.forEach(item => {
            item.name = item.key
          })
          this.userRoleRateData = res.data
          console.log(this.userRoleRateData)
        }
      })
    },
    getParkDuration() {
      api.post("/record/duration", null).then(res => {
        if (res?.code === 0) {
          this.userParkDurationData = res.data
          console.log(this.userParkDurationData)
        }
      })
    },
    getSpotStatus() {
      api.post("/spot/list/status", null).then(res => {
        if (res?.code === 0) {
          res.data?.forEach(item => {
            item.name = item.key
          })
          this.spotStatusData = res.data
          console.log(this.spotStatusData)
        }
      })
    }
  },
  watch: {
    userParkDurationData: {
      handler() {
        const chart = echarts.init(this.$refs.userParkDurationContainer);
        if (chart) {
          chart.setOption({
            series: [{data: this.userParkDurationData?.count}],
            xAxis: [{data: this.userParkDurationData?.label}]
          });
        }
      },
      deep: true
    },
    userRoleRateData: {
      handler() {
        const chart = echarts.init(this.$refs.userRoleRateContainer);
        if (chart) {
          chart.setOption({
            series: [{data: this.userRoleRateData}]
          });
        }
      },
      deep: true
    },
    spotStatusData: {
      handler() {
        const chart = echarts.init(this.$refs.SpotStatusContainer);
        if (chart) {
          chart.setOption({
            series: [{data: this.spotStatusData}]
          });
        }
      },
      deep: true
    },
  }

}
</script>

<style scoped>
.example-pagination-block {
  margin-top: 10px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.card-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
</style>
